// 导入样式
import style from "./styled.module.scss";
import { FC, useEffect, useState } from "react";
import { getFilmListApi } from "../../../../services/film";

import _ from "lodash";

// _.工具方法()
// 数据.map((item, i) => {})     后端如果null 项目直接蹦掉报错
// _.map(数据, (item, i) => {}) 底层会判断 null  不报做 只不过页面没数据

import { useMount } from "../../../../hooks/useMount";

interface Props {}
const Main: FC<Props> = () => {
  // state
  const [formData, setFormData] = useState({
    pagenum: 1,
    pagesize: 10,
    type: 1,
  });
  const [filmList, setFilmList] = useState<FILE.Item[]>([]);
  // useEffect
  // useEffect(() => {
  useMount(() => {
    const temp = async () => {
      // getFilmListApi(formData).then(res => {
      //     setFilmList(res.data.list)
      // })
      const {
        data: { total, list },
      } = await getFilmListApi(formData);
      // res.data.list[0].
      // setFilmList(res.data.list);
      setFilmList(list);
    };

    temp();
  });
  // }, []);
  return (
    <>
      <ul className={style.mainul}>
        {_.map(filmList, (item: FILE.Item) => {
          return (
            <li key={item.id}>
              {/* 图片 */}
              <img src={item.poster} alt="" />
              <div className={style.limiddle}>
                <h2>
                  {item.name}
                  <span>{item.filmType}</span>
                </h2>
                <p>
                  观众评分<span>{item.grade}</span>
                </p>
                <p>
                  主演：
                  {JSON.parse(item.actors).map((peo: any, index: any) => {
                    return <span key={index}>{peo.name}、</span>;
                  })}
                </p>
                <p>中国大陆 | {item.runtime}分钟</p>
              </div>
              <button className={style.liright}>购票</button>
            </li>
          );
        })}
      </ul>
    </>
  );
};

export default Main;
